<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合式API用户列表</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .container {
            margin: 50px;
        }
        .content {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="Application">
    </div>
    <script>
        let mock = [
            {
                name:"小王",
                sex:0
            },{
                name:"小红",
                sex:1
            },{
                name:"小李",
                sex:1
            },{
                name:"小张",
                sex:0
            }
        ]
        const App = Vue.createApp({
            setup() {
                // 用户列表
                const showDatas = Vue.ref([])
                const queryAllData = () => {
                    // 模拟请求过程
                    setTimeout(()=>{
                        showDatas.value = mock
                    }, 3000);
                }
                // 组件挂载是请求数据
                Vue.onMounted(queryAllData)

                let sexFliter = Vue.ref(-1)
                let searchKey = Vue.ref("")
                let fliterData = () => {
                    searchKey.value = ""
                    if (sexFliter.value == -1) {
                        showDatas.value = mock
                    } else  {
                        showDatas.value = mock.filter((data)=>{
                            return data.sex == sexFliter.value
                        })
                    }
                }
                searchData = () => {
                    sexFliter.value = -1
                    if (searchKey.value.length == 0) {
                        showDatas.value = mock
                    } else  {
                        showDatas.value = mock.filter((data)=>{
                            return data.name.search(searchKey.value) != -1 
                        })
                    }
                }
                // 添加侦听
                Vue.watch(sexFliter, fliterData)
                Vue.watch(searchKey, searchData)

                return {
                    showDatas,
                    searchKey,
                    sexFliter
                }
            },
            template: `
            <div class="container">
                <div class="content">
                    <input type="radio" :value="-1" v-model="sexFliter"/>全部
                    <input type="radio" :value="0" v-model="sexFliter"/>男
                    <input type="radio" :value="1" v-model="sexFliter"/>女
                </div>
                <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
                <div class="content">
                    <table border="1" width="300px">
                        <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        </tr>
                        <tr v-for="(data, index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex == 0 ? '男' : '女'}}</td>
                        </tr>
                        </table>
                </div>
            </div>
            `
        })
        App.mount("#Application") 
    </script>
</body>
</html>